<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- <view style="
                display: flex;
                align-items: center;
                width: 100%;
                box-sizing: border-box;
                position: fixed;
                top: 0;
                left: 0;
                padding-left: 30rpx;
                z-index: 99;
                background-color: #fff;
            " :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }">
			<uni-icons type="left" size="20" @click="goback"></uni-icons>
			<view style="display: flex; align-items: center">
				<view style="font-weight: bold; font-size: 36rpx; color: #151515; padding-left: 254rpx">群组2(500)</view>
			</view>
			<view></view>
		</view> -->
		<!-- 站位盒子 -->
		<!-- <view :style="{ height: navheight + 'px', width: '100%' }"></view> -->
		<!-- 时间 -->
		<!-- <view style="font-size: 24rpx; color: #999999; display: flex; align-items: center; justify-content: center; margin-top: 22rpx; margin-bottom: 60rpx">
      {{ msglist[0] ? util.timeChange2(msglist[0].sentTime) : '' }}
    </view> -->
		<!-- 聊天页面 -->
		<scroll-view :refresher-triggered="refresh" :refresher-enabled="false" @scrolltoupper="gethistory"
			:scroll-with-animation="true" id="scrollview" @scroll="scrollfn" :scroll-into-view="messageid"
			scroll-y="true" :scroll-top="scrollTop"
			:style="{ height: scrollheight, paddingBottom: '20rpx', 'box-sizing': 'border-box' }">
			<view :id="i.masageid" style="padding: 0 30rpx" v-for="(i, k) in msglist" :key="k">
				<view v-if="k % 20 == 0"
					style="font-size: 24rpx; color: #999999; display: flex; align-items: center; justify-content: center; margin-top: 50rpx; margin-bottom: 60rpx">
					{{ msglist[k] ? util.timeChange2(msglist[k].sentTime) : '' }}
				</view>
				<view class="left" v-if="userid != i.senderUserId">
					<image :src="JSON.parse(i.content.extra) ?  img_url + JSON.parse(i.content.extra).sendHead : ''"
						style="width: 100rpx; height: 100rpx; border-radius: 12rpx 12rpx 12rpx 12rpx; margin-right: 20rpx"
						mode="aspectFill" @tap="util.urlTo('/dynamic/userhome/userhome?userid=' + i.senderUserId)">
					</image>
					<view style="position: relative">
						<view
							style="position: absolute; left: 5%; max-width: 550rpx; overflow: hidden; white-space: nowrap">
							{{ JSON.parse(i.content.extra) ?   JSON.parse(i.content.extra).sendName :'' }}
						</view>
						<!-- 占位 -->
						<view style="height: 50rpx"></view>
						<!-- 文本显示 -->
						<view v-if="i.messageType == 'RC:TxtMsg'" style="
                border-radius: 0rpx 100rpx 100rpx 100rpx;
                font-weight: 500;
                font-size: 28rpx;
                color: #151515;
                padding-top: 30rpx;
                background-color: #f4f4f4;
                padding: 18rpx 37rpx;
                max-width: 540rpx;
                box-sizing: border-box;
              ">
							{{ i.content.content }}
						</view>
						<!-- 图片 -->
						<view class="" v-if="i.messageType == 'RC:ImgMsg'">
							<image :src="i.content.imageUri" mode="aspectFill"
								@tap="util.seeimg([i.content.imageUri], 1)" style="width: 180rpx; height: 180rpx">
							</image>
						</view>
						<!-- 语音显示 -->
						<view v-if="i.messageType == 'RC:HQVCMsg'" style="
                box-sizing: border-box;
                padding: 0 20rpx;
                width: 260rpx;
                height: 72rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-left: 16rpx;
                border-radius: 0rpx 100rpx 100rpx 100rpx;
                background-color: #f4f4f4;
              " @tap="onPlay(i.content.remoteUrl)">
							<text>{{ Math.ceil(Number(i.content.duration) / 1000) }}</text>
							<image src="../../static/dynamicimg/leftvoice.png" style="width: 32rpx; height: 40rpx"
								mode=""></image>
						</view>
					</view>
				</view>
				<view class="right" v-if="userid == i.senderUserId">
					<view style="position: relative">
						<view style="position: absolute; right: 5%">我</view>
						<!-- 占位 -->
						<view style="height: 50rpx"></view>
						<!-- 文本提示 -->
						<view v-if="i.messageType == 'RC:TxtMsg'" style="
                border-radius: 100rpx 0rpx 100rpx 100rpx;
                font-weight: 500;
                font-size: 28rpx;
                color: #151515;
                font-weight: 400;
                font-size: 28rpx;
                color: #151515;
                background-color: #feff01;
                padding: 18rpx 37rpx;
                max-width: 540rpx;
                box-sizing: border-box;
              ">
							{{ i.content.content }}
						</view>
						<!-- 图片 -->
						<view class="" v-if="i.messageType == 'RC:ImgMsg'">
							<image :src="i.content.imageUri" mode="aspectFill"
								@tap="util.seeimg([i.content.imageUri], 1)" style="width: 180rpx; height: 180rpx">
							</image>
						</view>

						<!-- 语音提示 -->
						<view v-if="i.messageType == 'RC:HQVCMsg'" style="
                box-sizing: border-box;
                padding: 0 20rpx;
                width: 260rpx;
                height: 72rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-right: 16rpx;
                background-color: #feff01;
                border-radius: 100rpx 0rpx 100rpx 100rpx;
              " @tap="onPlay(i.content.remoteUrl)">
							<image src="../../static/dynamicimg/rightvoice.png" style="width: 32rpx; height: 40rpx"
								mode=""></image>
							<text>{{ Math.ceil(Number(i.content.duration) / 1000) }}</text>
						</view>
					</view>
					<image :src="JSON.parse(i.content.extra) ?  img_url + JSON.parse(i.content.extra).sendHead : ''"
						style="width: 100rpx; height: 100rpx; border-radius: 12rpx 12rpx 12rpx 12rpx; margin-left: 20rpx"
						mode="aspectFill"></image>
				</view>
			</view>
		</scroll-view>

		<!-- 站位盒子 -->
		<view class="" :style="{ height: morecaozuo && !emojishow ? '156rpx' : '462rpx' }"></view>
		<!-- 键盘 -->
		<view class="keybord"
			:style="{ height: morecaozuo && !emojishow ? '156rpx' : '462rpx', bottom: keybordheight > 0 ? keybordheight + 'px' : '' }">
			<view style="display: flex; justify-content: space-evenly; align-items: center">
				<!-- 	<image v-if="false" @click="iskeybord = !iskeybord" src="../../static/dynamicimg/voice.png"
					style="width: 60rpx; height: 60rpx" mode=""></image>
				<image v-else src="../../static/dynamicimg/keybord.png" style="width: 60rpx; height: 60rpx" mode="">
				</image> -->
				<textarea @focus="huifu2" @blur="hiufu" :adjust-position="false" maxlength="-1" v-if="iskeybord"
					:confirm-hold="true" :show-confirm-bar="false" :hold-keyboard="true" type="text" placeholder="请输入"
					style="width: 446rpx; height: 76rpx; background: #f8f8f8; border-radius: 100rpx 100rpx 100rpx 100rpx; padding-left: 24rpx; padding-top: 20rpx"
					v-model="content"></textarea>
				<!-- <input
          v-if="iskeybord"
          type="text"
          placeholder="请输入"
          style="width: 446rpx; height: 76rpx; background: #f8f8f8; border-radius: 100rpx 100rpx 100rpx 100rpx; padding-left: 24rpx"
          @confirm="send"
          v-model="content"
        /> -->
				<view v-else @longpress="sendvoice" @touchend="overvoice"
					style="width: 446rpx; height: 76rpx; background: #f8f8f8; border-radius: 100rpx 100rpx 100rpx 100rpx; text-align: center; line-height: 76rpx">
					松开 发送
				</view>
				<image src="../../static/dynamicimg/emjoy.png" style="width: 60rpx; height: 60rpx" mode=""
					@click="emojishow = !emojishow"></image>
				<image v-if="morecaozuo" @click="(emojishow = false), (morecaozuo = !morecaozuo)"
					src="../../static/dynamicimg/caozuo.png" style="width: 60rpx; height: 60rpx" mode=""></image>
				<image @click="morecaozuo = !morecaozuo" src="../../static/messageimg/d2.png"
					style="width: 60rpx; height: 60rpx" v-else mode=""></image>
				<view @click="send" v-if="true"
					style="width: 120rpx; height: 60rpx; background-color: limegreen; color: #fff; font-size: 30rpx; text-align: center; line-height: 60rpx; border-radius: 10rpx">
					发送
				</view>
			</view>
			<view style="display: flex; align-items: center" v-if="emojishow">
				<scroll-view scroll-y="true" style="height: 300rpx">
					<view class="" style="display: flex; align-items: center; flex-wrap: wrap; padding: 10rpx">
						<view class="" v-for="(i, k) in faceList" :key="k" style="font-size: 60rpx;line-height: 64rpx;"
							@tap="bq(k)">
							{{ i }}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 更多操作 -->
			<view style="display: flex; align-items: center; margin-top: 82rpx" v-if="!morecaozuo">
				<view style="text-align: center; margin-left: 64rpx" @tap="sendimg">
					<image src="../../static/dynamicimg/sendimg.png" style="width: 112rpx; height: 112rpx" mode="">
					</image>
					<view>图片</view>
				</view>
				<view style="text-align: center; margin-left: 64rpx" @click="groupguanli">
					<image src="../../static/messageimg/d1.png" style="width: 112rpx; height: 112rpx" mode=""></image>
					<view>群管理</view>
				</view>
			</view>
		</view>

		<!-- 语音弹框 -->
		<uni-popup ref="voice" type="center">
			<view class="voice">
				<image src="../../static/dynamicimg/voiceicon.png" style="width: 88rpx; height: 132rpx" mode=""></image>
				<view style="font-weight: 400; font-size: 28rpx; color: #ffffff">手指上滑，取消发送</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const record = uni.getRecorderManager();
	const RongIMLib = require('@rongcloud/imlib-next');
	import faceList from '../../utils/emoji.js';
	export default {
		data() {
			return {
				showsend: false,
				sendswich: false,
				refresh: false,
				messageid: '',
				userlist: [],
				scrollTop: 99999,
				screen: 0,
				keybordheight: 0,
				hometop: '',
				navheight: '',
				morecaozuo: true,
				iskeybord: true,
				id: '',
				extra: {
					sendName: '',
					sendHead: '',
					receiveName: '',
					receiveHead: '',
					allnum: ''
				},
				content: '',
				msglist: [],
				img_url: this.img_url,
				userid: uni.getStorageSync('user').id,
				// 录音开始时间，用于计算录音时长
				recordStartTime: 0,
				// 延时录音定时器
				recordTimer: null,
				faceList,
				emojishow: false,
				inrecord: false, // 是否处于录音状态
				listener: null
			};
		},
		onLoad(op) {
			// let initialViewportHeight = window.innerHeight;

			// window.addEventListener('resize', () => {
			// 	const currentViewportHeight = window.innerHeight;

			// 	// 判断键盘是否弹起
			// 	if (currentViewportHeight < initialViewportHeight) {
			// 		const keyboardHeight = initialViewportHeight - currentViewportHeight;
			// 		console.log('键盘弹起，键盘高度为:', keyboardHeight);
			// 		this.showsend = true;
			// 		this.keybordheight = keyboardHeight;
			// 		// console.log('键盘弹起', this.keybordheight);
			// 		this.messageid = '';
			// 		this.$nextTick(() => {
			// 			setTimeout(() => {
			// 				this.messageid = this.msglist[this.msglist.length - 1].masageid;
			// 			}, 200);
			// 		});
			// 	} else {
			// 		console.log('键盘收起');
			// 		this.showsend = false;
			// 		this.keybordheight = 0;
			// 	}

			// 	// 更新初始视口高度 
			// 	initialViewportHeight = currentViewportHeight;
			// });



			uni.onKeyboardHeightChange(this.onKeyboardHeightChange);
			this.id = op.id;
			const app = getApp();
			console.log('系统信息', app.globalData.system);
			this.screen = app.globalData.system.screenHeight;
			this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
			this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData
				.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
		},
		computed: {
			scrollheight() {
				if (!this.morecaozuo || this.emojishow) {
					return this.screen - this.navheight - 78 - this.keybordheight + 'px';
				} else {
					return this.screen - this.navheight - 78 - this.keybordheight + 'px';
				}
			}
		},
		watch: {
			scrollheight(value) {
				console.log('滚得动高度', value);
			},
			emojishow(value) {
				console.log('表情的', value);
				if (value) {
					uni.hideKeyboard();
					this.morecaozuo = true;
				}
			},
			morecaozuo(value) {
				console.log('更多操作的', value);
				if (!value) {
					uni.hideKeyboard();
					this.emojishow = false;
				}
			}
		},
		async onShow() {
			await this.detail();
			await this.groupdetail();
			this.$nextTick(() => {
				this.getHistoryMessages();
			});
			await this.getGroupRes();

			// 此处判断用户是否被禁言
			this.$nextTick(() => {
				setTimeout(() => {
					const arr = this.userlist.filter((item) => {
						return item.user_id == this.extra.senduserid;
					});
					if (arr.length == 0) {
						uni.showToast({
							title: '您已被踢出群聊',
							icon: 'none'
						});
					}
				}, 500);
			});

			// this.utilim.listener(this.id).then(res=>{
			// 	console.log(res,'这个')
			// 	this.msglist.push(res)
			// 	this.next(1)
			// })
			const Events = RongIMLib.Events;
			const to_id = this.id;
			this.listener = (evt) => {
				console.log('监听的消息------', evt);
				evt.messages[0].messageid = 'msg' + evt.messages[0].messageId;
				if (this.msglist[this.msglist.length - 1].messageUId == evt.messages[0].messageId) {
					return;
				}
				//防止串聊
				if (evt.messages[0].conversationType == 3 && this.id == evt.messages[0].targetId) {
					evt.messages[0].masageid = 'msg' + evt.messages[0].messageId;
					this.messageid = evt.messages[0].masageid;
					this.msglist.push(evt.messages[0]);
					// 解决卡消息重复
					if (this.msglist[this.msglist.length - 1].messageUId == this.msglist[this.msglist.length - 2]
						.messageUId) {
						this.msglist.splice(this.msglist.length - 1, 1);
					}
					const messageUId = evt.messages[0].messageUId;
					const timestamp = evt.messages[0].sentTime;
					// 此处注释为了解决群聊角标不显示
					// this.utilim.clear(this.id, 'GROUP');
					RongIMLib.sendReadReceiptMessage(to_id, messageUId, timestamp)
						.then((res) => {
							if (res.code === 0) {
								console.log(res.code, res.data, '----------');
							} else {
								console.log(res.code, res.msg);
							}
						})
						.catch((error) => {
							console.log(error);
						});
					console.log(evt.messages, '监听消息改变');
				}
			};
			// 页面滚动
			RongIMLib.addEventListener(Events.MESSAGES, this.listener);
			this.utilim.clear(this.id);
		},

		methods: {
			pageScrollToBottom() {
				setTimeout(() => {
					uni
						.createSelectorQuery()
						.select('#scrollview')
						.boundingClientRect((rect) => {
							// console.log(rect.height);
							uni.pageScrollTo({
								scrollTop: 999999
							});
						})
						.exec();
				}, 50);
			},
			// 滚动刷新
			async scrollfn(e) {
				if (!this.refresh) {
					if (e.detail.deltaY < 0) return;
					if (e.detail.deltaY > 100) {}
				}
			},
			// 下拉刷新
			async gethistory() {
				console.log('触发了');
				// this.refresh = true;
				await this.jiazai();
				// this.refresh = false;
			},
			huifu2() {
				this.morecaozuo = true;
				this.emojishow = false;
			},
			hiufu() {
				uni.hideKeyboard();
			},

			onKeyboardHeightChange(res) {
				const {
					height,
					duration
				} = res;
				// 键盘弹起
				if (height > 0) {
					this.showsend = true;
					this.keybordheight = height;
					// console.log('键盘弹起', this.keybordheight);
					this.messageid = '';
					this.$nextTick(() => {
						setTimeout(() => {
							this.messageid = this.msglist[this.msglist.length - 1].masageid;
						}, 200);
					});
				}
				// 键盘收回
				else {
					this.showsend = false;
					this.keybordheight = 0;
					// console.log('键盘收回', this.keybordheight);
				}
			},
			onPlay(e) {
				const audio = uni.createInnerAudioContext();
				audio.src = e;
				audio.play();
				// this.bgAudioManager = uni.createInnerAudioContext()
				// this.bgAudioManager.src = e
				// this.bgAudioManager.play()
			},
			jiazai() {
				const conversation = {
					conversationType: RongIMLib.ConversationType.GROUP,
					targetId: this.id
				};
				// 从当前时间开始向前查询
				const option = {
					timestamp: this.msglist[0].sentTime,
					count: 20,
					order: 0
				};
				RongIMLib.getHistoryMessages(conversation, option).then((res) => {
					if (res.code === 0) {
						res.data.list.forEach((item) => {
							item.masageid = 'msg' + item.messageId;
						});
						this.http('/index/displace', {
							data: JSON.stringify(res.data.list)
						}).then((res2) => {
							console.log('刷新历史消息', res2);
							// this.msglist = res.data.list.concat(res2.data);
							this.msglist.unshift(...res2.data);
							console.log(this.msglist);
						});

						// this.msglist.unshift(res.data.list)
						console.log('消息', res.data.list);
						if (res.data.list.length == 0) {
							uni.showToast({
								title: '历史记录已全部加载完毕'
							});
						}
						console.log(res.data.hasMore);
					} else {
						console.log(res.code, res.msg);
					}
				});
			},
			bq(k) {
				let ary = [];
				ary.push(this.faceList[k]);
				this.content += ary;
				// this.emiashow = false
			},
			// 群资料
			getGroupRes() {
				this.http('/group/getGroupRes', {
					group_id: this.id
				}).then((res) => {
					uni.setNavigationBarTitle({
						title: res.data.group_name + '(' + res.data.user_nums + ')' // 设置新标题
					});
				});
			},
			// 获取历史消息
			getHistoryMessages() {
				this.utilim.getHistoryMessages(this.id).then((res) => {
					// console.log('历史消息', res);
					res.forEach((item) => {
						item.masageid = 'msg' + item.messageId;
					});

					this.http('/index/displace', {
						data: JSON.stringify(res)
					}).then((res) => {
						console.log('历史消息-------------------', res.data);
						this.msglist = res.data;
						this.$nextTick(() => {
							setTimeout(() => {
								this.messageid = this.msglist[this.msglist.length - 1]
									.masageid;
							}, 50);
						});
					});

					console.log('初始化的消息id', this.messageid);
					this.next(1);
				});
			},
			async groupdetail() {
				const res = await this.http('/group/getGroupRes', {
					group_id: this.id
				});
				console.log('群详情', res);
				this.userlist = res.data.user_list;
				this.extra.receiveName = res.data.group_name;
				this.extra.receiveHead = res.data.group_avatar;
				this.extra.allnum = res.data.user_nums;
			},
			detail() {
				this.http('/user/infor', {}).then((res) => {
					console.log('发送消息的用户', res);
					this.extra.sendName = res.data.nickname;
					this.extra.sendHead = res.data.avatar;
					this.extra.senduserid = res.data.id;
				});
			},
			async send() {
				await this.groupdetail();
				if (this.content == '') {
					uni.showToast({
						title: '请输入消息内容',
						icon: 'none'
					});
					return;
				}
				console.log('当前的用户', this.id, this.content, this.extra);
				const arr = this.userlist.filter((item) => {
					return item.user_id == this.extra.senduserid;
				});
				if (arr[0].status == 1) {
					this.content = '';
					return uni.showToast({
						title: '你已被禁言',
						icon: ''
					});
				}
				console.log('消息发不出去', this.sendswich);
				if (!this.sendswich) {
					console.log('消息连点', 111111);
					this.sendswich = true;
					this.utilim.sendmsg(this.id, this.content, this.extra).then((res) => {
						console.log('发送的消息回执', res);
						res.masageid = 'msg' + res.messageId;
						this.messageid = 'msg' + res.messageId;
						this.content = '';
						this.sendswich = false;
						this.msglist.push(res);
						// this.scrollToBottom();
						this.pageScrollToBottom();
					});
				}
			},
			groupguanli() {
				uni.navigateTo({
					url: '/message/groupguanli/groupguanli?id=' + this.id
				});
			},

			goback() {
				uni.navigateBack();
			},
			// 长按语音
			sendvoice() {
				this.$refs.voice.open();
				this.inrecord = true;
				// 录音部分参数
				const recordOptions = {
					duration: 60000, // 录音的时长，单位 ms，最大值 600000（10 分钟）
					sampleRate: 44100, // 采样率
					numberOfChannels: 1, // 录音通道数
					encodeBitRate: 192000, // 编码码率
					format: 'mp3' // 音频格式，选择此格式创建的音频消息，可以在即时通信 IM 全平台（Android、iOS、微信小程序和Web）互通
				};
				this.recordTimer = setTimeout(() => {
					record.start(recordOptions);
					this.recordStartTime = Date.now();
				}, 250);
			},
			// 录音结束
			onEnd() {
				// recorder.stop()
				// const time = Date.now() - this.recordStartTime;
				// if (time < 1000) {
				// 	return this.util.showToast('请说话久一点')
				// }
				// const Blob = recorder.getWAVBlob()
				// this.upVoice(Blob, time)
			},

			// 发送语音消息
			async upVoice(e, a) {
				await this.groupdetail();
				console.log('当前的用户', this.id, this.content, this.extra);
				const arr = this.userlist.filter((item) => {
					return item.user_id == this.extra.senduserid;
				});
				if (arr[0].status == 1) {
					this.content = '';
					return uni.showToast({
						title: '你已被禁言',
						icon: ''
					});
				}
				uni.uploadFile({
					url: this.$uploadUrl,
					filePath: e.tempFilePath,
					name: 'file',
					success: (rest) => {
						if (JSON.parse(rest.data).code == 1) {
							this.utilim.HQVoiceMessage(a, JSON.parse(rest.data).data.fullurl, this.extra,
								this.id).then((data) => {
								this.msglist.push(data);
								this.next(1);
							});
						} else {
							this.util.showToast('录音失败');
						}
						console.log(rest);

						// 处理上传成功的结果
					},
					fail: (uploadError) => {
						console.error('upload fail:', uploadError);
						// 处理上传失败的结果
					}
				});

				// this.util.uploadFile(e).then(rest => {
				// 	this.utilim.HQVoiceMessage(a, rest.fullurl.this.extra, this.text).then(data => {
				// 		this.msglist.push(data)
				// 		this.next(1)
				// 	})

				// })

				// this.util.uploadFile(e).then(rest => {
				// 	this.utilim.HQVoiceMessage(a, rest.fullurl.this.extra).then(data => {
				// 		this.msglist.push(data)
				// 		this.next(1)
				// 	})

				// })
			},
			overvoice() {
				this.$refs.voice.close();
				this.inrecord = false;
				record.stop();
				let that = this;
				// 监听录音暂停的回调参数
				record.onStop((res) => {
					console.log(res, '录音回调地址');
					const time = Date.now() - this.recordStartTime;
					if (time < 1000) {
						return this.util.showToast('请说话久一点');
					}
					// 某些平台没有返回录音时长和文件大小，此项自己添加一个大概值
					if (!res.duration) res.duration = time;

					this.upVoice(res, time);
				});
				record.onError((err) => {
					console.log(err);
					this.util.showToast('获取录音失败', err);
				});
			},

			// 发送图片
			async sendimg() {
				await this.groupdetail();
				console.log('当前的用户', this.id, this.extra);
				const arr = this.userlist.filter((item) => {
					return item.user_id == this.extra.senduserid;
				});
				if (arr[0].status == 1) {
					return uni.showToast({
						title: '你已被禁言',
						icon: ''
					});
				}
				this.utilim.sendimg(this.id, this.extra).then((res) => {
					this.msglist.push(res);
					this.next(1);
				});
			},
			next(e) {
				// if (e == 1) {
				//   this.$nextTick(() => {
				//     setTimeout(() => {
				//       const query = uni.createSelectorQuery();
				//       query
				//         .select('#box')
				//         .boundingClientRect((rect) => {})
				//         .exec((e) => {
				//           uni.pageScrollTo({
				//             duration: 50,
				//             scrollTop: 999999
				//           });
				//         });
				//     }, 50);
				//   });
				// }
			}
		},
		onUnload() {
			uni.offKeyboardHeightChange(this.onKeyboardHeightChange);
		},
		onHide() {}
	};
</script>

<style lang="scss" scoped>
	.container {
		.box {
			box-sizing: border-box;
			width: 580rpx;
			height: 340rpx;
			border-radius: 30rpx;
			background: #e3e3e3;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		}

		box-sizing: border-box;

		.left {
			display: flex;
			margin-bottom: 60rpx;
			margin-top: 15rpx;
		}

		.right {
			display: flex;
			justify-content: flex-end;
			margin-top: 15rpx;
		}

		.keybord {
			padding-top: 30rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			background: #ffffff;
			box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.voice {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 300rpx;
			height: 300rpx;
			background: #636363;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}
	}
</style>